<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
<title>crane小说网注册</title>
<link th:href="@{/css/login.css}" rel="stylesheet" rev="stylesheet" type="text/css" />
<link th:href="@{/layui/css/layui.css}" rel="stylesheet" type="text/css"/>
<script type="text/javascript" th:src="@{/js/jQuery1.7.js}"></script>
<script type="text/javascript" th:src="@{/js/jquery-1.8.2.min.js}"></script>
<script type="text/javascript" th:src="@{/js/jquery1.42.min.js}"></script>
<script type="text/javascript" th:src="@{/js/jquery.SuperSlide.js}"></script>
<script type="text/javascript" th:src="@{/js/Validform_v5.3.2_min.js}"></script>
<script type="text/javascript" th:src="@{/js/jquery-3.0.0.min.js}"></script>
<script type="text/javascript" th:src="@{/layui/layui.all.js}"></script>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(function(){
/*注册信息验证*/
$("#sec_username_hide").focus(function(){
 var username = $(this).val();
 if(username=='输入用户名'){
 $(this).val('');
 }
});
$("#sec_username_hide").focusout(function(){
 var username = $(this).val();
 if(username==''){
 $(this).val('输入用户名');
     layer.msg('用户名不能为空', {icon: 5,time: 3000 });
 }
});
//密码验证
$("#sec_password_hide").focus(function(){
 var username = $(this).val();
 if(username=='输入密码'){
 $(this).val('');
 }
});
$("#sec_password_hide").focusout(function(){
 var username = $(this).val();
 if(username==''){
 $(this).val('输入密码');
     layer.msg('密码不能为空', {icon: 5,time: 3000 });
 }
});
//邮箱验证
$("#sec_email_hide").focus(function(){
    var username = $(this).val();
    if(username=='输入邮箱'){
        $(this).val('');
    }
});
$("#sec_email_hide").focusout(function(){
    var username = $(this).val();
    var patrn=/^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;
    if(username==''){
        $(this).val('输入邮箱');
        layer.msg('邮箱不能为空', {icon: 5,time: 3000 });
    }else if(!patrn.exec(username)){
        $(this).val('输入邮箱');
        layer.msg('邮箱格式不对', {icon: 5,time: 3000 });
    }
});
//手机号验证
$("#sec_phone_hide").focus(function(){
 var username = $(this).val();
 if(username=='输入手机号'){
 $(this).val('');
 }
});
$("#sec_phone_hide").focusout(function(){
 var patrn=/^[1][3,4,5,7,8][0-9]{9}$/;
 var username = $(this).val();
 if(username==''){
    $(this).val('输入手机号');
     layer.msg('手机号不能为空', {icon: 5,time: 3000 });
 }else if(!patrn.test(username)){
     $(this).val('输入手机号');
     layer.msg('手机号格式不正确', {icon: 5,time: 3000 });
 }
});
//验证码
$("#sec_code_hide").focus(function(){
 var username = $(this).val();
 if(username=='请输入'){
 $(this).val('');
 }
});
$("#sec_code_hide").focusout(function(){
 var username = $(this).val();
 if(username==''){
 $(this).val('请输入');
     layer.msg('验证码不能为空', {icon: 5,time: 3000 });
 }
});
});
</script>
<script type="text/javascript">
$(function(){
	$(".screenbg ul li").each(function(){
		$(this).css("opacity","0");
	});
	$(".screenbg ul li:first").css("opacity","1");
	var index = 0;
	var t;
	var li = $(".screenbg ul li");	
	var number = li.size();
	function change(index){
		li.css("visibility","visible");
		li.eq(index).siblings().animate({opacity:0},3000);
		li.eq(index).animate({opacity:1},3000);
	}
	function show(){
		index = index + 1;
		if(index<=number-1){
			change(index);
		}else{
			index = 0;
			change(index);
		}
	}
	t = setInterval(show,8000);
	//根据窗口宽度生成图片宽度
	var width = $(window).width();
	$(".screenbg ul img").css("width",width+"px");
});
</script>
</head>
<body>
<div id="tab">
  <p id="tab_p"><img th:src="@{/images/seecen.png}"/></p>
  <div class="tab_box">
     <!-- 注册开始-->
      <form th:action="@{register}" method="post" class="sec_login_error" id="form_register">
        <div id="username1">
          <label>用&nbsp;&nbsp;&nbsp;户：</label>
          <input type="text" id="sec_username_hide" name="username" value="输入用户名" />
          <!--ajaxurl="demo/valid.jsp"--> 
        </div>
        <div id="password3">
          <label>密&nbsp;&nbsp;&nbsp;码：</label>
          <input type="password" id="sec_password_hide" name="password" value="输入密码" />
        </div>
        <div id="password4">
          <label>确认密码：</label>
          <input type="password" id="ag_password" name="ag_password" value="确认密码" sucmsg="密码验证通过！"/>
        </div>
        <div id="email">
          <label>邮箱：</label>
          <input type="text" id="sec_email_hide"  name="email" value="输入邮箱" />
        </div>
        <div id="phone">
          <label>手机号：</label>
          <input type="text" id="sec_phone_hide"  name="phone" value="输入手机号"/>
        </div>
        <div id="code3">
          <label>验证码：</label>
          <input type="text" id="sec_code_hide" name="code"  value="请输入" />
          <input type="button" id="getcode1" value="获取验证码"/>
        </div>
        <div id="sex" style="text-align: left;padding-left: 40px">
          <label style="float: left;margin-top: 18px">性&nbsp;&nbsp;&nbsp;别：</label>
          <div class="radio" style="float: left">
            <input id="radio-1" name="sex" type="radio" checked value="0">
            <label for="radio-1" class="radio-label">男</label>
          </div>
          <div class="radio">
            <input id="radio-2" name="sex" type="radio" value="1">
            <label  for="radio-2" class="radio-label">女</label>
          </div>
        </div>
        <div id="register">
          <button id="registerUser">确认注册</button>
        </div>

      </form>
     <!-- 注册结束-->
  </div>
</div>
<div class="bottom">©2019 Leting <a href="javascript:;" target="_blank">关于</a> <span>seecen1905-01</span>  More Templates <a href="#" >松松考试官网</a></div>
<div class="screenbg">
    <ul>
        <li><img th:src="@{/images/1.jpg}"/></li>
        <li><img th:src="@{/images/2.jpg}"/></li>
    </ul>
</div>

</body>
</html>
<script type="text/javascript" >
  $("#sec_username_hide").blur(function () {
      //实现异步请求
      var name=$(this).val();
      $.ajax({
          async:true,//是否异步，默认值是true异步，false则是同步
          url:"${pageContext.request.contextPath}/user/checkUsername",//请求地址
          data:"username="+name,//向服务器端发送的数据
          type:"post",//请求方式
          dataType:"text",//服务端返回的数据类型
          success:function (result) {
              //请求发送成功之后所执行的函数，也叫回调函数，参数是返回的字符串
              if(result=="用户名已经存在"){
                  $("#sec_username_hide").val('');
                  layer.msg(result+',请重新输入', {icon: 2,time: 3000 })
              }else {
                  layer.msg(result, {icon: 1,time: 3000 })
              }
          }
      })
  })
  $("#sec_phone_hide").blur(function () {
      //实现异步请求
      var phone=$(this).val();
      $.ajax({
          async:true,//是否异步，默认值是true异步，false则是同步
          url:"${pageContext.request.contextPath}/user/checkPhone",//请求地址
          data:"phone="+phone,//向服务器端发送的数据
          type:"post",//请求方式
          dataType:"text",//服务端返回的数据类型
          success:function (result) {
              //请求发送成功之后所执行的函数，也叫回调函数，参数是返回的字符串
              if(result=="手机号已被注册"){
                  $("#sec_phone_hide").val('');
                  layer.msg(result+',请重新输入', {icon: 2,time: 3000 })
              }else {
                  layer.msg(result, {icon: 1,time: 3000 })
              }
          }
      })
  })

$("#ag_password").focus(function () {
    var pwd =$(this).val();
    if (pwd=='确认密码'){
        $(this).val('');
    }
});
$("#ag_password").focusout(function () {
    var pwd =$(this).val();
    var upwd= $("#sec_password_hide").val();
    if (pwd!=upwd){
        layer.msg('两次密码不一致', {icon: 5,time: 3000 });
    }else {
        layer.msg('密码验证通过', {icon: 6,time: 2000 });
    }
});
$("#registerUser").click(function () {
    var un=$("#sec_username_hide").val();
    var pw=$("#sec_password_hide").val();
    var rn=$("#sec_realname_hide").val();
    var em=$("#sec_email_hide").val();
    var code = $("#sec_code_hide").val();
    if(un=='输入用户名'){
        layer.msg('用户名不能为空', {icon: 6,time: 3000 });
        return false;
    }else if(pw=='输入密码'){
        layer.msg('密码不能为空', {icon: 6,time: 3000 });
        return false;
    }else if(rn=='输入真实姓名'){
        layer.msg('真实姓名不能为空', {icon: 6,time: 3000 });
        return false;
    }else if(em=='输入邮箱'){
        layer.msg('邮箱不能为空', {icon: 6,time: 3000 });
        return false;
    }else if(code=='请输入'){
        layer.msg('验证码不能为空', {icon: 6,time: 3000 });
        return false;
    }else {
        $("#form_register").submit();
    }
})
  $("#getcode1").click(function(){
      var phone=$("#sec_phone_hide").val();
      if(phone!='输入手机号'){
          $.post('${pageContext.request.contextPath}/user/getcode?phone='+phone,function(){
              layer.msg('验证码已发送，请查收', {icon: 6,time: 3000 });
              codeButton1();
              return false;
          })
      }else {
          layer.msg('您未输入手机号', {icon: 5,time: 3000 });
          return false;
      }
  })
  function codeButton(){
      var getcode = $("#getcode");
      getcode.attr("disabled","disabled");
      setTimeout(function(){
          getcode.css("opacity","0.8");
      },1000)
      var time = 60;
      var set=setInterval(function(){
          getcode.val(--time+"秒后重新获取");
      }, 1000);
      setTimeout(function(){
          getcode.attr("disabled",false).val("重新获取验证码");
          clearInterval(set);
      }, 60000);	};
  function codeButton1(){
      var getcode = $("#getcode1");
      getcode.attr("disabled","disabled");
      setTimeout(function(){
          getcode.css("opacity","0.8");
          },1000)
      var time = 60;
      var set=setInterval(function(){
          getcode.val(--time+"秒后重新获取");
          }, 1000);
      setTimeout(function(){
          getcode.attr("disabled",false).val("重新获取验证码");
          clearInterval(set);
          }, 60000);
  };
</script>